<template>
  <div class="common-layout">
      <div class="login">
          <el-form
  ref="ruleFormRef"
  style="max-width: 600px"
  :model="ruleForm"
  :rules="rules"
  label-width="auto"
  class="demo-ruleForm"
  :size="formSize"
  status-icon
>
          
<el-form-item label="用户名" prop="name">
    <el-input v-model="ruleForm.name" />
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="ruleForm.password" type="password" />
  </el-form-item>
  
  <el-form-item style="margin-left: 150px;">
    <el-button type="primary" @click="submitForm(ruleFormRef)">
      登录
    </el-button>
    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
  </el-form-item>
</el-form>
      </div>
  </div>
</template>
<style scoped>
.common-layout{
  background: url(../../assets/20200822150813_suqlh.jpeg)
  no-repeat center;
  height: 100%;
  width: 100%;
  background-size: cover;
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
}
.login{
  width: 400px;
  height: 200px;
  text-align: center;
  margin-top: 400px;
  margin-left: 200px;
  
}
</style>
<script>
import { reactive } from 'vue';
import { ElForm } from 'element-plus';

import axios from 'axios';
export default {
components: {
  ElForm,
  // 其他需要的 Element Plus 组件
},
data() {
  return {
    formSize: 'default',
    ruleForm: reactive({
      name: 'Hello',
    }),
    locationOptions: ['Home', 'Company', 'School'],
    options: Array.from({ length: 10000 }).map((_, idx) => ({
      value: `${idx + 1}`,
      label: `${idx + 1}`,
    })),
    rules: {
      name: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '长度要在3-10', trigger: 'blur' },
      ],   
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 3, max: 10, message: '长度要在3-10', trigger: 'blur' },
      ],      
    },
    ruleFormRef: null,
    userlist:[]
  };
},
mounted() {
  this.$nextTick(() => {
    this.ruleFormRef = this.$refs.ruleFormRef;
  });
  axios.get('users.json').then(res => {
    this.userlist = res.data.userslist;
  });
},
methods: {
  async submitForm() {
    if (!this.ruleFormRef) return;
    await this.ruleFormRef.validate((valid, fields) => {
      if (valid) {
        //此处完成用户名和密码的匹配，如果匹配，则跳转到首页
        //使用some函数来对数组进行变了，查看符合条件的数据，如果找到了，则返回ture，否则返回false
        let flag=this.userlist.some(v=>v.name==this.ruleForm.name&&v.password==this.ruleForm.password)
        if(!flag){
          alert('请输入正确的用户名或密码')
        }else{
          // 存储用户名
          sessionStorage.setItem('username',this.ruleForm.name);
          // 检查是否有重定向地址
          const redirect = sessionStorage.getItem('redirect');
          if (redirect) {
              // 跳转到重定向地址
              this.$router.push(redirect);
              // 清除重定向地址
              sessionStorage.removeItem('redirect');
          } else {
              this.$router.push('/');
          }
        }
        console.log('submit!');
      } else {
        console.log('error submit!', fields);
      }
    });
  },
}
}
</script>